{% extends 'base.html' %}

{% block head %}
{{ super() }}
<link rel="stylesheet" href="{{ url_for('static', filename='auth.css') }}">
{% endblock %}

{% block content %}
<div class="auth-container">
    <div class="auth-header">
        <h2><i class="fas fa-user-plus"></i> 注册</h2>
        <p class="auth-subtitle">创建您的医院管理系统账号</p>
    </div>

    <form method="post">
        <div class="form-group">
            <label for="username"><i class="fas fa-user"></i> 用户名</label>
            <input type="text" id="username" name="username" class="form-control" required
                   placeholder="请设置用户名" autocomplete="username"
                   pattern="[a-zA-Z0-9_]{2,20}"
                   title="用户名长度2-20位，只能包含字母、数字和下划线">
        </div>
        <div class="form-group">
            <label for="password"><i class="fas fa-lock"></i> 密码</label>
            <input type="password" id="password" name="password" class="form-control" required
                   placeholder="请设置密码" autocomplete="new-password"
                   pattern="^(?=.*[A-Za-z])(?=.*\d)[A-Za-z\d]{8,}$"
                   title="密码至少8位，必须包含字母和数字">
        </div>
        <div class="form-group">
            <label for="confirm_password"><i class="fas fa-lock"></i> 确认密码</label>
            <input type="password" id="confirm_password" name="confirm_password" class="form-control" required
                   placeholder="请再次输入密码" autocomplete="new-password">
        </div>
        <div style="text-align: center;">
            <button type="submit" class="btn btn-primary">
                <i class="fas fa-user-plus"></i> 注册
            </button>
            <a href="{{ url_for('login') }}" class="btn btn-secondary">
                <i class="fas fa-sign-in-alt"></i> 返回登录
            </a>
        </div>
    </form>
</div>

<script>
document.querySelector('form').addEventListener('submit', function(e) {
    var password = document.getElementById('password');
    var confirm_password = document.getElementById('confirm_password');

    if (password.value !== confirm_password.value) {
        e.preventDefault();
        alert('两次输入的密码不一致！');
        confirm_password.value = '';
        confirm_password.focus();
    }
});
</script>
{% endblock %}